// import * as datas from "./datas.js"

// 引用另一个js文件
document.write("<script type='text/javascript' src='datas.js'></script>");
window.onload = function() {
    var oUl = document.getElementById("content_header");
    var oDiv = document.getElementById("content_list");
    var oTips = document.getElementById("tips_Content");
    for(var i = 0; i < data.length; i++) {
        oUl.innerHTML += "<li>" + data[i].name + "</li>"
    }

    var lis = oUl.getElementsByTagName("li");
    lis[0].className = "sec";

    for(var i = 0;i < lis.length; i++) {
        lis[i].index = i;
        lis[i].onclick = function() {
            // 清除元素，避免元素叠加
            oDiv.innerHTML = "";
            oTips.innerHTML = "";
            // 清除导航栏li的className，目的是为了使选中项高亮
            for(var j = 0; j < lis.length; j++){
                lis[j].className = "";
            }
            this.className = "sec";
            liClicked(data[this.index]);
        }
    }
    liClicked(data[0]);
}

function liClicked(da){
    var oCon = document.getElementById("content");
    var oTip = document.getElementById("tips");
    var oDiv = document.getElementById("content_list");
    var oTips = document.getElementById("tips_Content");
    for(var i = 0; i < da.list.length; i++){
        var ul = document.createElement("ul");
        var li = document.createElement("li");
        var a = document.createElement("a");
        a.innerHTML = da.list[i].title;
        a.href = "#";
        li.appendChild(a);
        ul.appendChild(li);
        oDiv.appendChild(ul);
        a.index = i;
        var h4 = document.createElement('h4');
        var lisArr = [document.createElement('li'),
            document.createElement('li'),
            document.createElement('li'),
            document.createElement('li'),
            document.createElement('li'),
            document.createElement('li')];
        lisArr[0].className = 'col';
        lisArr[1].className = 'col';
        lisArr[2].className = 'col';
        lisArr[3].className = 'col';
        lisArr[4].className = 'col';
        lisArr[5].className = 'col';

        a.onmouseover=function() {
            oTip.style.display = "block";
            oTip.style.left = oCon.offsetLeft + this.offsetWidth + 10 + 'px';
            oTip.style.top = this.offsetTop + this.scrollTop + 'px';
            h4.innerHTML = da.list[this.index].company;
            lisArr[0].innerHTML = da.list[this.index].recruitingNumbers;
            lisArr[1].innerHTML = da.list[this.index].workingLocation;
            lisArr[2].innerHTML = da.list[this.index].workExperience;
            lisArr[3].innerHTML = da.list[this.index].education;
            lisArr[4].innerHTML = da.list[this.index].wage;
            lisArr[5].innerHTML = da.list[this.index].addDate;
            oTips.appendChild(h4);
            oTips.appendChild(lisArr[0]);
            oTips.appendChild(lisArr[1]);
            oTips.appendChild(lisArr[2]);
            oTips.appendChild(lisArr[3]);
            oTips.appendChild(lisArr[4]);
            oTips.appendChild(lisArr[5]);
        }

        li.onmouseout=function(){
            oTip.style.display="none";
        }
    }
}